"use client";

import { use } from "react";
import Link from "next/link";
import { ExternalLink } from "lucide-react";
import { useApi } from "@/lib/api";
import { fmtDate, fmtDuration, fmtNum, truncate } from "@/lib/format";
import { Empty, Metric, Panel, Skeleton, SurfaceChips, Table, Tag, TypeTag } from "@/components/ui";
import type { EntityRow } from "@/components/EntityTable";

interface Detail {
  entity: EntityRow & { first_seen: string; last_seen: string; seen_count: number; first_session: string };
  observations: { session_id: string; step: number; ts: string; surfaces: string[]; snapshot: { name?: string; author?: string; metrics?: Record<string, number>; context?: string; provenance?: { surface: string; confidence: number; detail?: string }[] }; goal: string | null }[];
  relations: { rel_type: string; from_fp: string; to_fp: string; from_name: string | null; to_name: string | null; from_type: string; to_type: string; step: number }[];
  media: { duration_s: number | null; width: number | null; height: number | null; delivery: { kind: string; hostnames: string[] } | null; frames: string[] | null; thumbnail_url: string | null } | null;
  feed: { session_id: string; step: number; page_type: string; feed_position: number; visible: boolean; ts: string }[];
}

export default function EntityPage({ params }: { params: Promise<{ fp: string }> }) {
  const { fp } = use(params);
  const { data, loading, error } = useApi<Detail>(`/entities/${encodeURIComponent(decodeURIComponent(fp))}`);
  if (loading) return <Skeleton rows={10} />;
  if (error || !data) return <Empty>{error ?? "not found"}</Empty>;
  const e = data.entity;
  const type = e.entity_type ?? e.type ?? "?";
  return (
    <div className="space-y-4">
      <div className="text-xs text-dim mono">
        <Link href="/entities" className="hover:text-cyan">entities</Link> / {e.fingerprint}
      </div>
      <div className="flex flex-wrap items-start gap-4">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <TypeTag type={type} />
            <Tag>{e.platform}</Tag>
            {e.url && (
              <a href={e.url} target="_blank" rel="noreferrer" className="text-dim hover:text-cyan flex items-center gap-1 text-xs">
                open on platform <ExternalLink className="h-3.5 w-3.5" />
              </a>
            )}
          </div>
          <h1 className="text-xl font-semibold tracking-tight mt-2 max-w-3xl">{e.name ?? e.text_excerpt ?? e.platform_id}</h1>
          {e.author && <div className="text-sm text-fg-2 mt-1">by {e.author}</div>}
          {e.text_excerpt && e.name && <p className="text-sm text-fg-2 mt-2 max-w-3xl">{e.text_excerpt}</p>}
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Panel title="Evidence per field" sub="every canonical value points back to the surface that produced it (§38)" className="xl:col-span-2" pad={false}>
          <div className="p-4">
            <Table head={["field", "value", "evidence"]} dense>
              {Object.entries(e.fields ?? {}).map(([k, f]) => (
                <tr key={k}>
                  <td className="mono text-fg-2 whitespace-nowrap">{k}</td>
                  <td className="max-w-[480px] break-words">{typeof f.value === "string" ? f.value : JSON.stringify(f.value)}</td>
                  <td>
                    <SurfaceChips provenance={f.provenance} />
                    {f.provenance?.[0]?.detail && <div className="text-[10px] text-dim mono truncate max-w-[280px]">{f.provenance[0].detail}</div>}
                  </td>
                </tr>
              ))}
            </Table>
          </div>
        </Panel>
        <div className="space-y-4">
          <Panel title="Canonical record">
            <Metric label="platform id" value={e.platform_id ?? "—"} />
            <Metric label="confidence" value={e.confidence ? Number(e.confidence).toFixed(2) : "—"} />
            <Metric label="observed" value={`${e.seen_count}× in ${new Set(data.observations.map((o) => o.session_id)).size} session(s)`} />
            <Metric label="first seen" value={fmtDate(e.first_seen)} />
            <Metric label="last seen" value={fmtDate(e.last_seen)} />
            {e.metrics &&
              Object.entries(e.metrics).map(([k, v]) => (
                <Metric key={k} label={k} value={fmtNum(v)} />
              ))}
            {data.media && (
              <>
                <Metric label="duration" value={fmtDuration(data.media.duration_s)} />
                {data.media.width ? <Metric label="resolution" value={`${data.media.width}×${data.media.height}`} /> : null}
                {data.media.delivery && <Metric label="delivery" value={`${data.media.delivery.kind} · ${data.media.delivery.hostnames.slice(0, 2).join(", ")}`} />}
              </>
            )}
          </Panel>
          {data.media?.frames?.length ? (
            <Panel title="Sampled frames" sub="0 / 25 / 50 / 75 / 100 % (LEVEL 2)">
              <div className="grid grid-cols-5 gap-1">
                {data.media.frames.map((f) => (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img key={f} src={`/media/${f.split("/media/")[1] ?? ""}`} alt="" className="aspect-video object-cover rounded" />
                ))}
              </div>
            </Panel>
          ) : data.media?.thumbnail_url || e.media?.thumbnail_url ? (
            <Panel title="Thumbnail">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={data.media?.thumbnail_url ?? e.media?.thumbnail_url ?? ""} alt="" className="rounded w-full" />
            </Panel>
          ) : null}
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <Panel title="Observations" sub="raw sightings, never overwritten (§37)" pad={false}>
          <div className="p-4">
            <Table head={["when", "session", "step", "surfaces", "context", "name as seen"]} dense>
              {data.observations.map((o, i) => (
                <tr key={i}>
                  <td className="mono text-dim whitespace-nowrap">{fmtDate(o.ts)}</td>
                  <td>
                    <Link href={`/sessions/${o.session_id}`} className="mono text-[11px] hover:text-cyan">
                      {truncate(o.goal ?? o.session_id, 32)}
                    </Link>
                  </td>
                  <td className="mono">#{o.step}</td>
                  <td>
                    <SurfaceChips provenance={o.snapshot.provenance ?? o.surfaces.map((s) => ({ surface: s, confidence: 0 }))} />
                  </td>
                  <td className="text-dim text-[11px]">{o.snapshot.context}</td>
                  <td className="text-fg-2 max-w-[260px] truncate">{o.snapshot.name}</td>
                </tr>
              ))}
            </Table>
          </div>
        </Panel>
        <div className="space-y-4">
          <Panel title="Relationships" pad={false}>
            <div className="p-4">
              {data.relations.length ? (
                <Table head={["from", "relation", "to"]} dense>
                  {data.relations.map((r, i) => (
                    <tr key={i}>
                      <td className="max-w-[240px] truncate">
                        <TypeTag type={r.from_type ?? "?"} /> <Link href={`/entities/${encodeURIComponent(r.from_fp)}`} className="hover:text-cyan">{truncate(r.from_name ?? r.from_fp, 40)}</Link>
                      </td>
                      <td>
                        <Tag color="#9d7bff">{r.rel_type}</Tag>
                      </td>
                      <td className="max-w-[240px] truncate">
                        <TypeTag type={r.to_type ?? "?"} /> <Link href={`/entities/${encodeURIComponent(r.to_fp)}`} className="hover:text-cyan">{truncate(r.to_name ?? r.to_fp, 40)}</Link>
                      </td>
                    </tr>
                  ))}
                </Table>
              ) : (
                <Empty>no relationships recorded</Empty>
              )}
            </div>
          </Panel>
          <Panel title="Feed exposure" sub="where it ranked when the crawler saw it (§44)" pad={false}>
            <div className="p-4">
              {data.feed.length ? (
                <Table head={["when", "page", "position", "visible"]} dense>
                  {data.feed.map((f, i) => (
                    <tr key={i}>
                      <td className="mono text-dim whitespace-nowrap">{fmtDate(f.ts)}</td>
                      <td>
                        <Tag color="#38e1ff">{f.page_type}</Tag>
                      </td>
                      <td className="mono">#{f.feed_position + 1}</td>
                      <td className="mono">{f.visible ? "yes" : "below fold"}</td>
                    </tr>
                  ))}
                </Table>
              ) : (
                <Empty>not seen in a feed</Empty>
              )}
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}